<template>
  <div>
    <a-modal
      :maskClosable="false"
      :title="title"
      width="75vw"
      :centered="true"
      :bodyStyle="{
        padding: '0 24px'
      }"
      :visible="visible"
      destroyOnClose
      @cancel="handleCancel"
      cancelText="关闭"
    >
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
      </template>
      <a-card :bordered="false" :bodyStyle="{
          padding: '10px 24px'
        }"
        style="width: 100%; height: 80vh; overflow-y: auto;"
      >
        <div style="display: flex;margin-bottom: 15px;align-items: center;">
          <span style="line-height: 32px">证书名称：</span>
            <a-select
              :getPopupContainer="(node) => node.parentNode"
              showSearch
              placeholder="请选择证书名称"
              style="width: 200px"
              :filterOption="filterOption"
              v-model="queryParam.certificateName"
              allowClear
            >
              <a-select-option v-for="d in dataOptions" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
            </a-select>
          <span style="margin-left: 20px;line-height: 32px">证书种类：</span>
          <j-dict-select-tag placeholder="请选择证书种类" v-model="queryParam.certificateType" dictCode="certificate_type" :style="{width:'200px'}"/>
          <span style="margin-left: 20px;line-height: 32px">当前状态：</span>
          <j-dict-select-tag placeholder="请选择当前状态" v-model="queryParam.isExpired" dictCode="is_expired" :style="{width:'200px'}"/>
          <div style="display: inline-block;margin-left: 20px">
            <a-button @click="searchByquery" type="primary" icon="search">查询</a-button>
            <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
          </div>
        </div>
        <!-- <div style="display: flex;align-item: center;margin-bottom: 15px">
          <div style="display: inline-block;">
            <a-button @click="searchByquery" type="primary" icon="search">查询</a-button>
            <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
          </div>
        </div> -->
        <a-table
          ref="table"
          :scroll="{ x: true }"
          bordered
          :components="drag(columns)"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp"
        >
        <span slot="action" slot-scope="text, record">
          <a @click="handleUrl(record)">去处理</a>
        </span>
        </a-table>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
  import {getAction} from '@/api/manage'
  import {filterObj} from '@/utils/util'
  import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
  import {tableDragResize} from '@/utils/draggable-multistage'

  export default {
    name: "ExpirationReminder",
    mixins: [tableDragResize],
    props: {
      dictoptions: {
        type: Object,
        require: true
      },
      dataOptions: {
        type: Array,
        require: true
      }
    },
    data() {
      return {
        title: "公司资质过期提醒",
        queryParam: {
          isExpired: '0'
        },
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
          },
          {
            title: '证书名称',
            align: "center",
            dataIndex: 'certificateName',
            width: 200,
            customRender: (value, row, index) => {
              if(!value){
                return ''
              } else {
                return filterMultiDictText(this.dictoptions['certificateName'], value + '')
              }
            }
          },
          {
            title: '证书种类',
            align: "center",
            width: 100,
            dataIndex: 'certificateType_dictText',
          },
          {
            title: '归属公司',
            align: "center",
            width: 200,
            dataIndex: 'fileName',
          },
          {
            title: '有效期',
            align: "center",
            width: 100,
            dataIndex: 'validPeriod',
          },
          {
            title: '当前状态',
            align: "center",
            width: 100,
            dataIndex: 'isExpired_dictText',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 150,
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'action',
            },
          },
        ],
        url: {
          list: '/api/erp/files/company/erpCompanyFiles/certificateExpiredList'
        },
        dataSource: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        visible: false,
        type: 'data'
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
            if (this.dataSource.length == 0 && this.ipagination.current != 1) {
              this.ipagination.current = this.ipagination.current - 1
              this.loadData(this.ipagination.current - 1);
            }
            if (this.dataSource.length > 0&&this.type=='data') {
              this.visible = true
            }
            if (this.dataSource.length == 0&&this.type=='data') {
              this.visible = false
            }
          }
        })
      },
      handleUrl(record){
        this.$router.push({
          path: '/erp/files/company/ErpCompanyFilesList'
        });
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter);
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      searchReset() {
        this.queryParam = {
          isExpired: '0'
        }
        this.type = ''
        this.loadData(1);
      },
      handleTableChange(pagination, filters, sorter) {
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        this.ipagination = pagination;
        this.loadData();
      },
      handleCancel() {
        this.visible = false;
      },
      searchByquery() {
        this.type = ''
        this.loadData(1);
      },
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

</style>